<template>
	<view class="class-content">

		<uniTabs :tabs="tabs" :activeTab="activeTab" lineHeight="false" @change="change" activeColor="#DD524D"
			class="tabs"></uniTabs>
		<!-- <qiun-title-bar title="基本折线区域图" />
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="areapotion" :chartData="chartsDataArea1" />
				</view> -->

		<view v-if="activeTab=='1'" class="people-item">
			<view v-for="(item,index) in list" class="item">
				<view class="item-view">
					<p class="item-index">{{index+1}}</p>
					<p class="item-name">{{item.name}} | {{item.amount}}人 </p>
				</view>
				<!-- <view class="item-view-item">
					<p class="item-ability" v-if="item.nameitem !==''">{{item.nameitem}}</p>
					<p class="item-ability" v-if="item.nameitem2 !==''">{{item.nameitem2}}</p>
					<p :class="item.class=='持证'?'normal-style':'special-style'">{{item.class}}</p>
				</view> -->

			</view>
			<image v-if="list.length<1"  style="position: absolute;top:0;left: 0;bottom: 0;right: 0;margin: auto;width: 600rpx;" src="../../../static/image/no-data.png" mode=""></image>
		</view>


	</view>
</template>

<script>
	import uniTabs from '@/components/v-tabs/v-tabs.vue'
	import api from '@/static/js/api.js'
	export default {
		data() {
			return {
				tabs: ['班组工人'],
				activeTab: 1,
				list: [],
				chartsDataArea1: {
					categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
					series: [{
						name: "成交量",
						data: [35, 32, 36, 34, 38, 30]
					}]
				},
				userinfo: [],

			}
		},
		components: {
			uniTabs,
		},
		onShow() {
			this.userinfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.workerList()
		},
		methods: {
			change(index) {
				this.activeTab = index
			},
			workerList() {
				api.classProject('jhj.team', '_api_public_jhj_team_browse_one', this.userinfo.team_id).then(res => {
					this.list = res.data.worker_list
				}).catch(e => {
					uni.showToast({
						icon: 'none',
						title: e.message
					})
				})
			}
		}


	}
</script>

<style scoped lang="scss">
	.charts-box {
		width: 750rpx;
		height: 500rpx;
	}

	.class-content {
		width: 100%;
		height: 100vh;
		background-color: #EBEEF5;

		.item:nth-child(1) {
			margin-top: 10rpx;
		}

		.item {
			border-bottom: 1px solid #F5F5F5;
			// height: 80rpx;
			background-color: #FFFFFF;
			display: flex;

			.item-view {
				width: 60%;
				display: flex;

				// background-color: red;
				.item-index {
					width: 50rpx;
					height: 50rpx;
					font-size: 28rpx;
					border-radius: 50%;
					line-height: 50rpx;
					text-align: center;
					background-color: #F5F5F5;
					margin: 23rpx 30rpx;
				}

				.item-name {
					margin: 30rpx 30rpx;
				}
			}

			.item-view-item {
				display: flex;
				justify-content: flex-end;
				width: 40%;

				p {
					padding: 6rpx 10rpx;
					height: 48rpx;
					border-radius: 5rpx;
					margin: 25rpx 20rpx;
				}

				.item-ability {
					background-color: #1E90FF;
					color: #FFFFFF;
				}

			}

			.normal-style {
				background-color: #FFD700;
				color: #FFFFFF;
			}

			.special-style {
				background-color: #C0C0C0;
				color: #FFFFFF;
			}
		}
	}

	.tabs {
		position: relative;
	}

	/deep/ .v-tabs {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		line-height: 100rpx;
	}

	/deep/ .v-tabs__container-item {
		width: 100%;
		justify-content: center;
	}
</style>
